<template>
  <div style="padding: 10px">
    <div class="all-xmu w">
      <div class="xmu-l l">
        <!--  搜素结果页 -->
        <div class="l-jieguo">
          <!-- 头部排序 -->
          <ul class="jieguo-top">
            <li>
              排序：
              <a href="#" :class="{ 'leibie-on': showId === '0' }" id="0" @click="byLoad">默认</a>
              <a href="#" :class="{ 'leibie-on': showId === '2' }" id="2" @click="byTime">按热门</a>
              <a href="#" :class="{ 'leibie-on': showId === '3' }" id="3" @click="byPeople">按时间</a>
            </li>
            <li class="r">共
              <span class="jieguo-num">{{ total }}</span>
              个项目
            </li>
          </ul>
          <!-- 搜索项目区 -->
          <ul class="jieguo-jieguo" style="border-top: 1px dashed #e2e5e6" v-for="item in tableData">
            <div class="jieguo-xm">
              <div @click="$router.push('/front/ticketDetail?id=' + item.concertId)" style="cursor: pointer"
                   class="cc-title">
                <img class="l cc-haibao" :src="item.concert.coverImg" alt="项目海报">
              </div>
              <div class="xm-l l">
                <a @click="$router.push('/front/ticketDetail?id=' + item.concertId)" class="cc-title">
                  {{ item.concert.name }} </a>
                <span class="blc cc-time">{{ item.concert.datetime }}</span>
                <span
                    class="blc cc-changguan">[{{ item.concert.venue.address }}]{{ item.concert.venue.name }}</span>
              </div>
              <div class="xm-r r">
                <span class="r-jiage"><span class="cc-price">¥{{ item.price }}</span> 起</span>
                <a @click="$router.push('/front/ticketDetail?id=' + item.concertId)" class="blc"
                   target="_blank">立即购买</a>
              </div>
            </div>
          </ul>
          <div class="M-box1"></div>
        </div>
      </div>
      <!-- 右侧最近浏览 排行 艺人 .. -->
      <div class="xmu-r r" style="position:relative;top: 22px">
        <!-- 热门榜单 -->
        <div class="r-remen">
          <div class="zuijin-top">热门榜单</div>
          <ul class="remen-liebiao">
            <li class="liebiao-da" v-for="item in people">
              <a href="/t_95497/">
                <img class="cc-haibao" :src="item.concert.coverImg" alt=""> <!-- 项目海报 -->
              </a>
              <span class="xiangmu-xinxi">
								<a style="margin-bottom: 9px;" href="/t_95497/" class="cc-title" target="_blank">
									{{ item.concert.name }}
								</a>
                <!-- 项目标题 -->
								<p class="cc-time">{{ item.concert.datetime }}</p> <!-- 项目时间 -->
								<p class="cc-changguan">{{ item.concert.venue.name }}</p> <!--  项目场馆 -->
								<p><span class="cc-price">{{ item.price }}</span>起</p> <!--  项目价格 -->
							</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div style="padding: 10px 0">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                     :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Ticket",
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 4,
      total: 0,
      level: "",
      showId: "0",
      people: []
    }
  },
  created() {
    this.load();
    this.toPeople()

  },
  methods: {
    load() {
      this.request.get("/user/ticket/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          level: this.level,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        console.log(this.tableData)
      })
    },
    byLoad() {
      this.showId = "0"
      this.load()
    },
    byTime() {
      this.showId = "2"
      this.request.get("/user/ticket/time", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    byPeople() {
      this.showId = "3"
      this.request.get("/user/ticket/people", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    toPeople() {
      this.request.get("/user/ticket/people", {
        params: {
          pageNum: 1,
          pageSize: 5,
        }
      }).then(res => {
        this.people = res.data.records
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      switch (this.showId) {
        case 0:
          this.byLoad();
          break;
        case 2:
          this.byTime();
          break;
        case 3:
          this.byPeople();
          break;
      }
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      switch (this.showId) {
        case 0:
          this.byLoad();
          break;
        case 2:
          this.byTime();
          break;
        case 3:
          this.byPeople();
          break;
      }
    },

  }
}
</script>
<style src="../../static/css/common.css" scoped></style>
<style src="../../static/css/allitems.css" scoped></style>
<style scoped>
/*.jieguo-xm img[data-v-11363dec] {*/
/*  display: block;*/
/*  width: 244px;*/
/*  height: 155px;*/
/*  margin-right: 14px;*/
/*}*/

/*.jieguo-xm .xm-l[data-v-11363dec] {*/
/*  width: 431px;*/
/*  height: 193px;*/
/*}*/
</style>